<template>
	<div>
		<template v-if="$slots.hasOwnProperty('default')">
			<slot name="default" :data="info.data"></slot>
		</template>
		<template v-else-if="info.data.type === 'text'">
			<span :class="[props.className]" v-if="info.data.data">{{ info.data.data }}</span>
		</template>
		<template v-else-if="info.data.type === 'image'">
			<image :class="[props.className]" style="width:100%;" mode="widthFix" v-if="info.data.data"
				:src="info.data.data"></image>
		</template>
		<template v-else-if="info.data.type === 'video'">
			<video :class="[props.className]" style="width:100%;" :poster="info.data.data.image"
				v-if="info.data.data.video" :src="info.data.data.video" controls></video>
		</template>
		<template v-else-if="info.data.type === 'swiper'">
			<u-swiper :class="['xi-swiper',props.className]" circular :height="props.height" imgMode="aspectFill"
				:list="info.data.data" @change="e => info.current = e.current" :autoplay="true" @click="on.click">
				<template v-slot:indicator>
					<view class="indicator">
						<view class="indicator__dot" v-for="(item, index) in info.data.data" :key="index"
							:class="[index === info.current && 'indicator__dot--active']"></view>
					</view>
				</template>
			</u-swiper>
		</template>
		<template v-else-if="info.data.type === 'rich'">
			<u-parse :content="info.data.data"></u-parse>
		</template>
	</div>
</template>

<script>
	let catch_list = {}
</script>

<script setup>
	let props = defineProps({
		code: {
			type: String,
			default: ''
		},
		className: {
			type: String,
			default: ''
		},
		height: {
			type: String,
			default: '150'
		},
	})

	let info = Vue.reactive({
		data: {},
		current: 0,
	})

	//监听props.name的变化和immediate
	Vue.watch(() => props.code, async (val, oldVal) => {
		if (props.code) {
			if (typeof catch_list[props.code] !== 'undefined') {
				info.data = await catch_list[props.code]()
			} else {
				catch_list[props.code] = xaoi.ele()
				$post('/index/base/ad/ad_find', {
					code: props.code
				}).then(res => {
					catch_list[props.code](res)
					info.data = res
				})
			}
		}
	}, {
		immediate: true
	})

	let on = {
		click: () => {
			if (info.data.type === 'swiper') {
				let item = info.data.data[info.current]
				console.log(item);
				
				if (item.path) {
					Vue.$push(item.path)
				} else {
					uni.previewImage({
						urls: info.data.data.map(v => v.url),
						current: info.current
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.indicator {
		display: flex;
		flex-direction: row;
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #666;
			}
		}
	}
</style>